<template>
  <div class="aftersaleDe">
    <div class="sticky left-0 right-0 top-0 z-9 h-full bg-hex-ffffff px-32rpx">
      <div class="relative z-999 flex items-center pb-40rpx"
           :style="{ paddingTop: `${searchBarTop}px` }"
           @click.stop="goback">
        <uni-icons type="back" size="28" />
        <div class="absolute left-0 top-0 w-100% text-center text-36rpx font-600"
             :style="{ top: `${searchBarTop}px` }"
        >售后详情</div>
      </div>
      <div class="mb-44rpx mt-38rpx">
        <div class="tex-hex-333 text-24rpx">提交申请</div>
        <div class="tex-hex-333 mt-10rpx text-60rpx font-600">已提交</div>
        <div class="mt-24rpx">
          <uni-steps :options="[{
            title: '提交申请',
          }, {
            title: '处理中',
          }, {
            title: afterDetail.afterSaleStatus === 2? '退款失败':'退款成功',
          }]" :active="formatAfterStatus(afterDetail?.afterSaleStatus)" />
        </div>
      </div>
      <div v-if="afterDetail?.logisticsNo"
           class="h-104rpx flex items-center justify-between rounded-24rpx p-24rpx"
           style="box-shadow: 0rpx 8rpx 40rpx 0rpx rgb(0 0 0 / 6%);">
        <div>
          <div class="flex">
            <span class="text-28rpx text-hex-333">运输中</span>
            <span class="ml-25rpx flex-1 text-24rpx text-hex-7C8699">湖南长沙</span>
          </div>
          <div class="mt-12rpx">
            <span class="text-28rpx text-hex-333">{{ afterDetail?.logisticsName }}</span>
            <span class="ml-25rpx flex-1 text-24rpx text-hex-7C8699">运单号：{{ afterDetail?.logisticsNo }}</span>
          </div>
        </div>
        <div>
          <image
            :src="`${cdnUrl}/svgicons/home/more.svg${imgVersion}`"
            mode="scaleToFill"
            class="h-40rpx w-40rpx"
          />
        </div>
      </div>
    </div>
    <div class="mt-32rpx px-32rpx">
      <div class="mb-16rpx p-32rpx" style="box-shadow: 0rpx 8rpx 40rpx 0rpx rgb(0 0 0 / 6%);">
        <div>
          <div
            v-for="item in afterDetail?.orderItemList"
            class="mb-32rpx flex justify-between"
          >
            <div class="w-90% flex">
              <div class="mr-24rpx h-180rpx w-180rpx flex items-center justify-center rounded-26rpx bg-hex-F5F3F0">
                <image
                  :src="item.productImage"
                  mode="scaleToFill"
                  class="h-128rpx w-95rpx"
                />
              </div>
              <div class="w-70% flex flex-col justify-between">
                <div class="text-28rpx font-600 text-hex-333333">{{ item.productName }}</div>
                <div class="flex items-center text-24rpx text-hex-7C8699">
                  <div>{{ item.specs }}</div>
                </div>
              </div>
            </div>
            <div class="w-10% flex flex-col justify-between">
              <div>
                <div class="mb-4rpx text-28rpx text-hex-333333">¥{{ item.flowPrice }}</div>
                <!-- <div class="text-24rpx text-hex-999999 line-through">¥29</div> -->
              </div>
              <div class="text-24rpx text-hex-999999">x{{ item.productQuantity }}</div>
            </div>
          </div>
        </div>
        <div class="mt-34rpx flex items-center justify-between">
          <span class="text-28rpx text-hex-333">订单编号</span>
          <span>
            <span class="text-24rpx text-hex-7C8699">{{ afterDetail?.businessId }}</span>
            <span class="ml-10rpx text-15rpx text-hex-7C8699">|</span>
            <span class="ml-14rpx text-24rpx text-hex-333" @click="copyAddress(afterDetail?.businessId)">复制</span>
          </span>
        </div>
        <!-- <div class="mt-34rpx flex items-center justify-between">
          <span class="text-28rpx text-hex-333">退货类型</span>
          <span class="text-24rpx text-hex-7C8699">仅退款</span>
        </div>
        <div class="mt-34rpx flex items-center justify-between">
          <span class="text-28rpx text-hex-333">收货状态</span>
          <span class="text-24rpx text-hex-7C8699">{{ afterDetail?.delivery === 0?'待发货':afterDetail?.delivery === 1?'配送中':'已到货' }}</span>
        </div> -->
        <div class="mt-34rpx flex items-center justify-between">
          <span class="text-28rpx text-hex-333">退款原因</span>
          <span class="text-24rpx text-hex-7C8699">{{ afterDetail?.reason }}</span>
        </div>
        <div class="mt-34rpx flex items-center justify-between">
          <span class="text-28rpx text-hex-333">申请金额</span>
          <span class="text-24rpx text-hex-7C8699">￥{{ Number(afterDetail?.applyRefundPrice).toFixed(2) }}</span>
        </div>
        <div class="mb-20rpx mt-34rpx flex items-center justify-center">
          <span class="text-24rpx text-hex-7C8699" @click="isShowImg=!isShowImg">{{ !isShowImg?'展开':'收起' }}</span>
        </div>
        <div v-if="isShowImg" class="flex">
          <div v-for="(item, index) in imageList"
               class="relative mb-25rpx mr-25rpx h-136rpx w-136rpx flex flex-col rounded-20rpx">
            <image
              class="h-136rpx w-136rpx rounded-20rpx bg-hex-F5F5F5"
              :src="item"
              mode="scaleToFill"
              @click="previewImage(index)"
            />
          </div>
          <div v-if="isShowPreview">
            <q-preview-image :urls="imageList" :current-index="currentIndex" :isShowDownLoad="false" @close="closePreview" />
          </div>
        </div>
      </div>
    </div>
    <div class="fixed bottom-0 left-0 right-0 h-136rpx">
      <div class="box-border flex items-center justify-end p-32rpx">
        <div class="h-72rpx w-272rpx border-2rpx border-hex-ABCD03 rounded-46rpx border-solid text-center leading-72rpx text-hex-ABCD03"
             @click="linkService">联系客服</div>
      </div>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { useUserStore } from '@/stores/user'

let searchBarTop: any = $ref('24')
let businessId = $ref('')
onLoad((options) => {
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  // #endif
  if (options && options.businessId) {
    businessId = options.businessId
  }

})
const { user } = useUserStore()
const goback = () => {
  uni.navigateBack({
    delta: 1,
  })
}

let afterDetail: any = $ref({})
let imageList: any = $ref([])
let isShowImg = $ref(true)
const getAfterDetail = async () => {
  const reqData = {
    method: 'post',
    headers: { UserId: user.id, AppType: 3 },
    data: { businessId },
  }
  const { data, status } = await Fetch('/qqyapi/order/afterSale/detail', reqData)
  if (status !== 200 || data.code !== 0) {return}
  let baseData = data?.result
  afterDetail = clone(baseData)
  imageList = (data?.result?.afterSaleImage).split(',')
}

// 复制粘贴
const copyAddress = (text) => {
  uni.setClipboardData({
    //去找上面的数据
    data: text,
    success(res) {
      uni.showToast({
        title: '复制成功',
      })
    },
    fail(res) {
      uni.showToast({
        title: '复制失败',
      })
    },
  })
}
//联系客服
const linkService = () => {
  uni.showToast({ title: '敬请期待', icon: 'none' })
}
const formatAfterStatus = (status) => {
  if (status === 3 || status === 2 || status === 4) {
    return 2
  } else {
    return 1
  }
}

let isShowPreview = $ref(false)
let currentIndex = $ref(1)
const previewImage = (index) => { // index 索引 如果 需要复用方法 可以使用 类型来进行区分(val)
  currentIndex = index
  isShowPreview = true
}
const closePreview = () => {
  isShowPreview = false
}
onMounted(() => {
  getAfterDetail()
})
</script>

<style lang='scss'>
</style>
